// ----------1.获取学生数据，并且渲染表格-----------------
async function renderStudents(){
    const {data:res}=await axios.get('/students')
    // console.log(res)
    let arr = res.data.map(item=>{
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i  data-id=${item.id} class="bi bi-trash"></i></a>
        </td>
      </tr>
        `
    })
    document.querySelector('tbody').innerHTML=arr.join('')
    document.querySelector('.total').innerHTML = arr.length
}
renderStudents()

// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏
let addModal = new bootstrap.Modal(document.querySelector('#modal'))
// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 重置表单
    document.querySelector('#form').reset()
    // 修改标题
    document.querySelector('h5.modal-title').innerHTML = '添加学员'
    // 让模态框显示 
    addModal.show()
})

// 下面的函数完成省市县的联动效果
async function initCity(){
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')

    // 1.获取全部的省，渲染到第一个下拉框位置
    const { data: res } = await axios.get('/api/province')
    // console.log(res) // { message: '获取成功', data: ['北京', '天津', '河北省', .....] }
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')

    // 2.切换省，获取对应的市，渲染到第二个下拉框位置
    province.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        // 省切换后，无论如何，都要重置县
        area.innerHTML = '<option value="">--地区--</option>'
        // 如果没有选择省，则需要重置市
        if (pname === '') return (city.innerHTML = '<option value="">--城市--</option>')
        // 下面，正常获取对应的市，并渲染到第2个下拉框的位置
        // console.log(pname)
        const { data: res } = await axios.get('/api/city', { params: { pname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市', 'xx市', 'xx市', .....] }
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
      })

    // 3.切换市的时候，获取对应的县，渲染到第三下拉框位置
    city.addEventListener('change', async function () {
        let pname = province.value // 获取当前选择的省的名字
        let cname = city.value // 获取市的名字

        // 没有选择市，要重置县
        if (cname === '') return (area.innerHTML = '<option     value="">--地区--</option>')
        // 下面，正常获取对应的县，并渲染到第3个下拉框的位置
        // console.log(pname)
        const { data: res } = await axios.get('/api/area', {     params: { pname, cname } })
        // console.log(res2) // { message: '获取成功', data: ['xx市    ', 'xx市', 'xx市', .....] }
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
    })    

}
initCity()

// 点击确认按钮添加学员
document.querySelector('#submit').addEventListener('click', async function(e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    // 把数字类型转换一下
    data.age=Number(data.age)
    data.gender = +data.gender //+必须和后面的变量连在一起
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary


    // 判断点击确认按钮时是添加还是修改操作
    let title = document.querySelector('#modal h5').innerHTML
    if(title === '添加学员'){
        // Ajax提交
        // const {data:res}=await axios.xxx('接口地址',data)
        try{
            const {data:res}=await axios.post('/students',data)
            message.success(res.message)//使用插件提示
            renderStudents()//重新获取页面数据，重新渲染
            addModal.hide()//关闭弹层
        }catch(e){
            Message.error('添加失败')
        }
    }else if (title === '修改学员') {
        try{
            let id = document.querySelector('#modal h5').dataset.id
            const {data:res}=await axios.put(`/students/${id}`,data)
            message.success(res.message)//使用插件提示
            renderStudents()//重新获取页面数据，重新渲染
            addModal.hide()//关闭弹层
        }catch(e){
            Message.error('修改失败')
        }
    }
    
})

// 删除操作 + 编辑操作
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 因为删除和编辑，都需要id，所以放到判断外部
    // let id = e.target.dataset.id
    // 判断点击的是否是删除
    if(e.target.classList.contains('bi-trash')){

        // message.confirm('提示', '你确定不要我了吗？', async res => {
        //     if (res) {
        //       // axios.delete(`/students/187`)
        //       await axios.delete(`/students/${id}`)
        //       message.success('删除成功')
        //       renderStudent() // 更新页面数据
        //     }
        //   })
// console.log('你点击的是删除',id);
        // message.confirm('提示', '你确定不要我了吗？', async (res) => {
        // if (res) {
        // try{
        //     const {data:res}= await axios.delete(`/students/${id}`)
        //     message.success('删除成功')
        //     renderStudents()
        // }catch (e){
        //     message.error('删除失败')
        // }}
        // })
        let id = e.target.dataset.id
        
        if(!confirm('确定要删除吗')) return
        try{
            const {data:res}= await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudents()
        }catch (e){
            message.error('删除失败')
        }
        
    }
    // 判断点击的是否是编辑修改
    if(e.target.classList.contains('bi-pen')){
        let id = e.target.dataset.id
        console.log('你点击的是编辑',id);
        
        // 修改标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        // 设置自定义属性，存储id
        document.querySelector('#modal h5').setAttribute('data-id', id)


        addModal.show()//点击编辑出现弹窗
        // 数据回填->首先得有数据->根据id发送请求获取数据
        const {data :res} = await axios.get(`/students/${id}`)
        // console.log(res)

        // 在数据回填之前，把市县取出，渲染到2,3下拉框中
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        // const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
        // console.log(c, a)
        // let arr2 = c.map(item => `<option value="${item}">${item}</option>`)
        // document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
        // let arr3 = a.map(item => `<option value="${item}">${item}</option>`)
        // document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')

        const result = await Promise.all([p1,p2])
        console.log(result)
        console.log(result[0].data.data)
        console.log(result[1].data.data)
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')

        // val(表单，数据)//传递两个参数，表示数据回填
        val(document.querySelector('#form'),res.data)
    }

})